<template>
  <div class="container" ref="echartsRefs"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const echartsRefs = ref<HTMLElement>()
const num = ref(0)
onMounted(() => {
  //初始化echarts实例init（ dom ，'主题' ，其余参数如：{ renderer:'svg' }）
  const myEchartsrs = echarts.init(echartsRefs.value!)
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 950, 960, 980],
        type: 'line',
        smooth: true,
      },
    ],
  }
  myEchartsrs.setOption(option)
  setInterval(() => {
    if (num.value < 7) {
      option.series[0].data[num.value] = Math.floor(Math.random() * 1000)
      myEchartsrs.setOption(option)
      num.value++
    } else {
      return (num.value = 0)
    }

    myEchartsrs.setOption(option)
  }, 7000)
})
</script>
